layui.use(['layer', "form"], function() {
  let layer = layui.layer;
  let form = layui.form;

  // 1.页面地址 获取id
  let id = location.href.split("=")[1];

  // ***************************************************页面初始化工作
  // 分类
  $.ajax({
    url: "/my/article/cates",
    success: function(res) {
      if (res.status == 0) {

        let str = `<option value="">无</option>`;
        res.data.forEach(item => {
          str += `<option value="${item.Id}">${item.name}</option>`;
        });
        $("select").html(str);

        form.render(); // form自己下拉选择框（单独渲染的）需要重新渲染

        // 获取文章详情
        get();
      }
    }
  });
  // 富文本编辑器
  initEditor();
  // cropper插件
  $('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 2 / 1,
    // 指定预览区域
    preview: '.img-preview'
  });
  $("#upload").click(function() {
    $("#file").click();
  });
  $("#file").on("change", function() {
    // 1.change后 可以图片对象！{}
    let obj = this.files[0];

    // 2.需要地址；URL字符串
    let url = URL.createObjectURL(obj);

    // 3.展示图片上：文档！更换图片地址！
    $('#image').cropper("replace", url);
  });


  // ***************************************************获取数据，进行回填
  // 在分类数据获取成功后才能进行调用
  function get() {


    // 2.通过id获取页面详情！
    $.ajax({
      url: "/my/article/" + id,
      success: function(res) {
        if (res.status == 0) {
          form.val("box", res.data); // 进行回填

          // 插件方式：
          // 文本区图片区都没有回填：专门的设置！
          // tinymce.activeEditor.setContent(res.data.content);

          // cropper设置：
          $('#image').cropper("replace", "http://api-breakingnews-web.itheima.net" + res.data.cover_img);
        }
      }
    });
  }


  // **********************************************数据提交
  $("form").on("submit", function(e) {
    e.preventDefault();


    // 1.收集数据
    let fd = new FormData(this);
    fd.append("Id", id);


    // 生僻：可能会用到知识；cropper插件 需要得到blob对象；
    let canvas = $('#image').cropper('getCroppedCanvas', {
      width: 400,
      height: 280
    });
    canvas.toBlob(function(obj) {
      fd.append("cover_img", obj); // fd收集数据成功！

      // 2.提交数据
      $.ajax({
        url: "/my/article/edit",
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        success: function(res) {
          layer.msg(res.message);
          if (res.status == 0) {

            // 找到index页面的 a原生的dom节点
            let aDom = window.parent.document.querySelector(".my_list");

            // JS模拟对a的点击行为
            aDom.click();
          }
        }
      })



    });



  })











});